<template>
  <div
    v-if="flightInfo != null"
    @mouseenter="scaleBox($event)"
    @mouseleave="unscaleBox($event)"
    style="transition: transform 0.2s"
  >
    <a-card
      class="scale-horizontal"
      style="
        width: 700px;
        height: 200px;
        margin-bottom: 13px;
        box-shadow: rgba(34, 34, 34, 0.07) 0px 4px 5px;
      "
    >
      <div id="content-box">
        <div id="left">
          <div id="left-content">
            <div class="start-box">
              <span class="date-text">{{ startDate }}</span>
              <span class="time-text">{{ startTime }}</span>
              <span class="city-text">{{ flightInfo.deployCity }}</span>
            </div>

            <div class="middle-box">
              <div class="horizontal-line left-line"></div>
              <img
                style="height: 25px; width: 25px"
                src="../assets/svg/aircraft1.svg"
              />
              <span class="duration-text">{{ duration }}</span>
              <div class="horizontal-line right-line"></div>
            </div>

            <div class="end-box">
              <span class="date-text">{{ endDate }}</span>
              <span class="time-text">{{ endTime }}</span>
              <span class="city-text">{{ flightInfo.arrivalCity }}</span>
            </div>
          </div>
          <div class="divider"></div>
        </div>

        <div id="right">
          <div class="aircraft-box">
            <svg
              class="icon"
              aria-hidden="true"
              style="font-size: 30px; display: inline-block; margin-right: 5px"
            >
              <use :xlink:href="'#' + flightInfo.aircraftInfoDTO.logo"></use>
            </svg>
            <span class="flight-number" style="text-decoration: underline">{{
              flightInfo.aircraftInfoDTO.airlineSimpleName + flightInfo.number
            }}</span>
            <span class="aircraft-model">{{
              flightInfo.aircraftInfoDTO.model
            }}</span>
          </div>

          <div class="pay-box">
            <span>{{ "￥" + flightInfo.price }}</span>
            <a-button
              type="primary"
              style="margin-top: 10px; width: 100px"
              @click="() => (openDialog = true)"
              :disabled="soldOut"
              >{{ soldOut ? "已售罄":"预定" }}</a-button
            >
            <a-modal
              v-model:open="openDialog"
              title="航班详细"
              @ok="() => (openDialog = false)"
              centered
            >
              <template #footer>
                <a-button key="back" @click="() => (openDialog = false)"
                  >取消</a-button
                >
                <a-button key="submit" type="primary" @click="confirmReserve" :loading="confirmLoading"
                  >确认预定</a-button
                >
              </template>
              <FlightCalendar :flightInfo="flightInfo"></FlightCalendar>
            </a-modal>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { computed, onBeforeMount, ref } from "vue";
import type { FlightInfo } from "../api/flightApi";
import moment from "moment";
import FlightCalendar from "./FlightCalendar.vue";
import { buyTicketApi, isSoldOut } from "../api/ticketApi";
import { HTTP_STATUS } from "../api/request";
import { message } from "ant-design-vue";

function scaleBox(event: Event) {
  let classList = (event.target as HTMLInputElement).classList;

  classList.add("scaled");
}

function unscaleBox(event: Event) {
  let classList = (event.target as HTMLInputElement).classList;
  classList.remove("scaled");
}

const props = defineProps(["flightInfo"]);

const flightInfo = ref<FlightInfo>(props.flightInfo);

const soldOut = ref<boolean>(false)

const openDialog = ref<boolean>(false);

const confirmLoading = ref<boolean>(false)

onBeforeMount(async () => {
  try {
    const res : any = await isSoldOut(flightInfo.value.id)
    if (res.status == HTTP_STATUS.SUCCESS) {
      soldOut.value = res.data
    }
  } catch (error) {
    console.error(error)
  }
})

function confirmReserve() {
  
  setTimeout(async () => {
    confirmLoading.value = true
    try {
      const res : any = await buyTicketApi(flightInfo.value.id)
    if (res.status == HTTP_STATUS.SUCCESS) {
      message.success("预定成功")
    }
    } catch (error) { 
    } finally {
      openDialog.value = false
      confirmLoading.value = false
    }
    
  })
}

const startDate = computed<string>(() => {
  return formatDate(flightInfo.value.startTime);
});

const endDate = computed<string>(() => {
  return formatDate(flightInfo.value.endTime);
});

const startTime = computed<string>(() => {
  return formatTime(flightInfo.value.startTime);
});

const endTime = computed<string>(() => {
  return formatTime(flightInfo.value.endTime);
});

const duration = computed<string>(() => {
  const format = "YYYY-MM-DD HH:mm";
  const startDate = moment(flightInfo.value.startTime, format).toDate();
  const endDate = moment(flightInfo.value.endTime, format).toDate();
  const ms = endDate.getTime() - startDate.getTime();
  const hour = Math.floor(ms / 1000 / 60 / 60);
  const minute = Math.floor((ms / 1000 / 60) % 60);
  return minute == 0 ? hour + " h" : hour + " h " + minute + " m";
});

function formatDate(date: string): string {
  const format = "YYYY-MM-DD HH:mm";
  const dateMoment = moment(date, format).toDate();

  const day = dateMoment.getDate();
  const month = dateMoment.getMonth() + 1;
  return month + " 月 " + day + " 日";
}

function formatTime(date: string): string {
  const format = "YYYY-MM-DD HH:mm";
  const dateMoment = moment(date, format).toDate();
  const hour = dateMoment.getHours();
  const min = dateMoment.getMinutes();
  return (hour == 0 ? "00" : hour) + ":" + (min < 10 ? "0" + min : min);
}
</script>

<style lang="scss" scoped>
@import "../assets/css/variables.scss";

.scaled {
  transform: scale(1.02);
}

:deep(.ant-card-body) {
  height: 100%;
  width: 100%;
  padding: 15px;
}

#content-box {
  height: 100%;
  width: 100%;

  display: grid;
  grid-template-columns: 5fr 2fr;

  #left {
    display: flex;
    #left-content {
      flex: 1;
      height: 100%;
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;

      .start-box,
      .end-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .middle-box {
        display: flex;
        justify-content: center;
        align-items: center;

        .horizontal-line {
          height: 2px;
          width: 95px;
          background-color: $dividerColor;
          &.left-line {
            margin-right: 10px;
          }

          &.right-line {
            margin-left: 10px;
          }
        }

        .duration-text {
          display: inline-block;
          position: absolute;
          top: 115px;
          color: $fontGrayColor;
        }
      }

      .time-text {
        font-size: 30px;
      }

      .date-text {
        color: #222222ff;
      }

      .city-text {
        color: $fontGrayColor;
        font-size: medium;
      }
    }

    .divider {
      width: 1px;
      height: 100%;
      float: right;
      margin-left: 10px;
      background-color: $dividerColor;
    }
  }

  #right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    .aircraft-box {
      width: 100%;
      align-self: flex-start;
      margin-top: 10px;

      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;

      .flight-number {
        flex-basis: 50%;
      }

      .aircraft-model {
        display: inline-block;
        text-align: center;
        width: 100%;
        color: $fontGrayColor;
        flex-basis: 100%;
      }
    }

    .pay-box {
      margin-top: 5px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      > span {
        color: red;
        font-size: 30px;
        position: relative;
        left: -10px;
      }
    }

    span {
      display: inline-block;
    }
  }

  span,
  img {
    user-select: none;
  }
}
</style>
